<!DOCTYPE html>
<html lang="en">
<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>
<link rel="stylesheet" href="../plugins/elementui/index.css">

<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>

<!--<script src="../js/axios-0.18.0.js"></script>-->


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录界面</title>
</head>
<style>
    .ww{
        /*font-family: 华文楷体 ;*/
        background-color: pink;
        width: 178px;
        height: auto;
        font-size: 20px;}

     .a{
         border: 5px;
         width: auto;
         height: 850px;

         background:#b4bccc url("../bj.png") no-repeat fixed center top;

     }
     .b{
         border: 5px;
     }

    .c{
        padding-right: 450px;
        padding-top: 100px;
    }.d{
        padding-bottom: 80px;
        padding-left: 100px;
         }

</style>
<body>


<div class="a"  >



        <form  action="/student/login2" method="post" class="c" >

            <table  align="right"  border="0" dashed="solid" class="b" >
                <p style="font-size:  40px " align="right"class="d">学生信息管理系统</p>





                <tr>
                    <td> 账号</td>
                    <td><input type="text" name="username" placeholder="请输入账号 "v-model="p.username" style="background-color: blanchedalmond"></td>
                </tr>

                <tr>
                    <td> 密码</td>
                    <td><input type="text" name="password" placeholder="请输入密码 "v-model="p.password" style="background-color: blanchedalmond"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div class="ww" align="center"> <div @click="randyzm() ">{{code}}


                    </div></div></td>
                    <td> </td>

                </tr>
                <tr><td></td></tr>
                <tr><td></td></tr> </tr>
                <tr><td></td></tr> </tr>
                <tr><td></td></tr>
                <tr>
                    <td> 验证码</td>




                    <td><input type="text" name="yzm"  placeholder="请输入验证码 "style="background-color: blanchedalmond" v-model="ym"></td>
                </tr>

                <tr>
                    <td></td>
                    <td>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-row>

                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<el-button type="success" type="submit" @click="e">登录</el-button>

                        </el-row>

                    </td>
                </tr>

            </table>

                            <div id="showHtml"></div>
</form>

</div>
<script>
    new Vue({
        el: ".a",
        data:{
            code:"点击获得验证码",
            yzmm:"",
            ym:"",
            p:{
                username: "",
                password: ""
            }
        },
        methods: {
            created(){

            },
            e(){
                if (this.ym!==this.yzmm){
                    alert("验证码错误")
                    return;
                }
                axios.post("/student/login2",this.p).then((res)=>{
                    alert(res.data.msg)
                    if (res.data.msg==="登录成功"){
                        window.location.href="/pages/student.html";
                    }
                })
            },





            randyzm() {
                //生成随机验证码
                let code = ''
                let coden = ''
                let yzmm =''
                let yzmmm = ''
                var codeLength = 4 //验证码的长度
                var r =new Array('*','`','-','~')
                var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P',
                    'Q', 'R', 'S', 'T', 'U', 'V', 'W','X', 'Y','Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u',
                    'v', 'w', 'x', 'y', 'z'
                ) //随机数
                for (var i = 0; i < codeLength; i++) {
                    //循环操作
                    var index = Math.floor(Math.random() * 62) //取得随机数的索引（0~61）
                   var yzm= Math.floor(Math.random() * 62)
                    var ro = Math.floor(Math.random() *4 )
                    code += random[index] //根据索引取得随机数加到code上
                    coden += r[ro]
                    yzmm +=random[yzm]
                    yzmmm +=random[yzm]
                    coden += random[yzm] //根据索引取得随机数加到code上
                }
                this.code = coden //把code值赋给验证码
                this.yzmm =yzmmm
            }

        }

    })
</script>



</body>
</html>